<!--  -->
<template>
  <div class="member-item flex" @click="seeMemberInfo">
    <div class="member-img">
      <van-image
        round
        width="40px"
        height="40px"
        :src="item.customer_avatar"
      />
    </div>
    <div class="member-wrap flex">
      <div class="wrap-content flex">
        <h3>{{ item.customer_nickname || item.we_nickname }}<span v-if="level == 0 && item.is_owner == 1" :style="`background: rgba(${coThemeColor},0.16)`">群主</span></h3>
        <div class="time">加入时间：{{ item.join_time_str }}</div>
        <div class="status flex">
          <div class="status-tag">{{ item.join_scene_desc }}</div>
          <div class="status-tag" v-if="item.is_bind == 1 && item.is_fans == 1">粉丝</div>
          <div class="status-tag" :class="{ gray: item.gray == 0 }">{{ item.status_desc }}</div>
        </div>
      </div>
      <div class="right" v-if="level == 0">
        <div class="icon-icon_more11 iconfont"></div>
      </div>

    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { Image as VanImage } from "vant";
export default {
name:'',
props: ["item", "share","level","coThemeColor"],
//import引入的组件需要注入到对象中才能使用
components: { VanImage },
data() {
return {

};
},
//监听属性 类似于data概念
computed: {},
//监控data中的数据变化
watch: {},
//方法集合
methods: {
  seeMemberInfo() {
    if(this.level == 0) {
      this.$emit("handSee", this.item);
    }
  }
},
//生命周期 - 创建完成（可以访问当前this实例）
created() {

},
//生命周期 - 挂载完成（可以访问DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 创建之前
beforeMount() {}, //生命周期 - 挂载之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 销毁之前
destroyed() {}, //生命周期 - 销毁完成
activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped>
/* @import url(); 引入公共css类 */
  .member-item {
    background: #FFFFFF;
    border-radius: 8px 8px 8px 8px;
    padding:10px;
    margin:0 0 10px 0;
    .member-wrap {
      flex:2;
      align-items: center;
      .wrap-content {
        flex-direction: column;
        text-align: left;
        padding:0 0 0 11px;
        width:95%;
        
        h3 {
          font-weight: 500;
          font-size: 15px;
          color: #00001C;
          padding:0 0 5px 0;
          span {
            font-weight: 400;
            font-size: 11px;
            color:  var(--themeBaseColor);
            padding:2px 4px;
            // background-color: rgba(241, 83, 83, 0.16);
            border-radius: 4px 4px 4px 4px;
            margin:0 0 0 3px;
          }
        }
        .time {
          font-weight: 400;
          font-size: 12px;
          color: #A1A1A1;
        }
        .status {
          padding:5px 0 0 0;
          .status-tag {
            font-weight: 400;
            font-size: 11px;
            color: #6E6E79;
            padding:3px 6px;
            background: #F5F5F5;
            border-radius: 4px 4px 4px 4px;
            margin:0 8px 0 0;
          }
        }
      }
      .right {
        .icon-icon_more11 {
          color:#AAAAB3;
        }
      }
    }
  }
</style>